<template>
  <div class="list_container flex both-100">
    <breadcrumb :title="pageTitle" />
    <div class="content_container">
      <!-- 搜索模块 -->
      <el-form ref="searchMap" :inline="true" :model="searchMap" class="serach_wrapper flex-space-between">
        <div class="search">
          <el-form-item prop="categoryName" size="small">
            <el-input v-model="searchMap.alarmCondition" placeholder="告警条件"></el-input>
          </el-form-item>
          <el-form-item prop="createBy" size="small">
            <el-input v-model="searchMap.alarmEventTypeId" placeholder="告警事件ID"></el-input>
          </el-form-item>
          <el-form-item class="flex">
            <el-button @click="getList()" class="btn_primary">查询</el-button>
            <el-button @click="handleReset()" class="btn_cancel">重置</el-button>
          </el-form-item>
        </div>
        <div class="edit">
          <el-form-item class="flex">
            <el-button @click="handleAdd" class="btn_primary" icon="el-icon-plus">
              新增
            </el-button>
          </el-form-item>
        </div>
      </el-form>

      <!-- 表格模块 -->
      <div class="table_container">
        <el-table :data="alarmRulesList" stripe v-loading="loading">
          <el-table-column prop="alarmCondition" label="告警条件" align="center"></el-table-column>
          <el-table-column prop="alarmEventTypeId" label="告警事件类型ID" width="220"></el-table-column>
          <el-table-column prop="alarmUrgency" label="告警紧急度" align="center">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.alarm_urgency_status" :value="scope.row.alarmUrgency" />
            </template>
          </el-table-column>
          <el-table-column prop="alarmValue" label="告警值" align="center"></el-table-column>
          <el-table-column key="alarmValueType" label="类型" align="center"></el-table-column>
          <el-table-column key="alarmValueUnit" label="告警值单位" align="center"></el-table-column>
          <el-table-column prop="createBy" label="创建人" align="center"></el-table-column>
          <el-table-column prop="createTime" label="创建事件" align="center"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <div class="button-group">
                <span type="text" class="tag_primary" size="small" @click="handleEdit(scope.row)">编辑</span>
                <span type="text" class="tag_warning" size="small" @click="handleDelete(scope.row)">删除</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <pagination v-if="total > 0" :total="total" :page.sync="searchMap.pageNum" :limit.sync="searchMap.pageSize" @change="getList"></pagination>
      <!-- 弹框 -->
      <div class="dialog_content">
        <el-dialog class="m_dialog" :title="title" :visible.sync="dialogVisible" width="800" append-to-body>
          <el-form ref="form" :model="formModel" label-width="120px" label-position="right">
            <el-row>
              <el-col :span="24">
                <el-form-item label="告警类型规则" prop="alarmEventTypeRule" size="small">
                  <el-input class="width-100" v-model="formModel.alarmEventTypeRule" controls-position="right" placeholder="请输入类型名称" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="告警条件" prop="alarmCondition" size="small">
                  <el-select v-if="formModel.urgencyGreaterValueGreater === '1'" v-model="formModel.alarmCondition" placeholder="请选择事件">
                    <el-option v-for="item in dict.type.urgency_greater_value_greater_operator" :key="item.value" :value="item.value" :label="item.label"></el-option>
                  </el-select>
                  <el-select v-else v-model="formModel.alarmCondition" placeholder="请选择事件">
                    <el-option v-for="item in dict.type.urgency_greater_value_smaller_operator" :key="item.value" :value="item.value" :label="item.label"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
              </el-col>
              <el-col :span="24">
                <el-form-item label="事件类型" prop="alarmEventTypeId" size="small">
                  <el-select v-model="formModel.alarmEventTypeId" placeholder="请选择事件">
                    <el-option v-for="item in alarmEventTypeOption" :key="item.value" :value="item.value" :label="item.label"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="告警紧急度" prop="alarmUrgency" size="small">
                  <el-radio-group v-model="formModel.alarmUrgency">
                    <el-radio v-for="dict in dict.type.alarm_urgency_status" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="告警值" prop="alarmValue" size="small">
                  <el-input v-model="formModel.alarmValue" placeholder="告警值" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="值类型" prop="alarmValueType" size="small">
                  <el-select v-model="formModel.alarmValueType" placeholder="值类型">
                    <el-option label="数值" value="0"></el-option>
                    <el-option label="百分比" value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="告警值单位" prop="alarmValueUnit" size="small">
                  <el-input v-model="formModel.alarmValueUnit" placeholder="告警值单位" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注" prop="remark" size="small">
                  <el-radio-group v-model="formModel.remark">
                    <el-radio v-for="dict in dict.type.device_indoor" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="紧急度大值越大" prop="urgencyGreaterValueGreater" size="small">
                  <el-radio-group v-model="formModel.urgencyGreaterValueGreater">
                    <el-radio v-for="dict in dict.type.alarm_rules_max" :key="dict.value" :label="dict.value">{{dict.label}}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false" class="btn_cancel">取 消</el-button>
            <el-button type="primary" @click="submitForm" class="btn_primary">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>

  </div>
</template>

<script>
import { listAlarmEventTypeRule, getAlarmEventTypeRuleListByid, addAlarmEventTypeRule, updateAlarmEventTypeRule, deleteAlarmEventTypeRule, listAlarmEventType } from '@/api/alarm'
export default {
  dicts: ['alarm_urgency_status', 'device_indoor', 'urgency_greater_value_greater_operator', 'urgency_greater_value_smaller_operator', 'alarm_rules_max'],
  name: 'alarmType',
  data () {
    return {
      // 弹框标题
      title: '弹框',
      //  弹框状态
      dialogVisible: false,
      // 加载状态
      loading: false,
      // 搜索条件
      searchMap: {
        //类型名称
        alarmCondition: undefined,
        // 创建人
        alarmEventTypeId: undefined,
      },
      // 表单数据
      formModel: {
        alarmEventTypeRuleId: undefined,
        alarmEventTypeId: undefined, //
        alarmEventTypeRule: undefined,
        alarmCondition: undefined,
        alarmUrgency: undefined,
        alarmValue: undefined,
        alarmValueType: undefined,
        alarmValueUnit: undefined,
        remark: undefined,
        urgencyGreaterValueGreater: undefined
      },
      alarmRulesList: [],
      // 总条数
      total: 0,
      // 事件规则类型下拉数据
      alarmEventTypeOption: []
    };
  },
  created () {
    this.getList()
    this.getAlarmEventTypeOption()
  },
  computed: {
    pageTitle () {
      return '告警规则'
    }
  },
  watch: {},
  methods: {
    // 告警类型列表
    getList () {
      this.loading = true
      listAlarmEventTypeRule(this.searchMap).then(res => {
        setTimeout(() => {
          this.alarmRulesList = res.rows
          this.total = res.total
          this.loading = false
        }, 10);
      })
    },
    // 点击搜索
    handleSearch () {
      this.getList()
    },
    // 点击重置
    handleReset () {
      this.$refs['searchMap'].resetFields()
      this.searchMap.alarmCondition = undefined
      this.searchMap.alarmEventTypeId = undefined
      this.handleSearch()
    },
    // 确定按钮
    handleAdd () {
      this.resetForm()
      this.dialogVisible = true
    },
    // 编辑按钮
    handleEdit (row) {
      this.resetForm()
      getAlarmEventTypeRuleListByid(row).then(res => {
        this.formModel = res.rows[0]
      })
      this.dialogVisible = true
    },
    // 删除按钮
    handleDelete (row) {
      const alarmRuleId = [row.alarmEventTypeRuleId]
      this.$confirm(`是否删除ID:${row.alarmEventTypeRuleId}`, '删除', { type: 'error', configButtonText: "确定", cancelButtonText: "取消", }).then(() => {
        deleteAlarmEventTypeRule(alarmRuleId).then((res) => {
          this.$message.success('删除成功')
          this.getList()
        })
      })
    },
    // 提交表单
    submitForm () {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.formModel.alarmEventTypeRuleId !== undefined) {
            updateAlarmEventTypeRule(this.formModel).then(res => {
              if (200 === res.code) {
                this.$message.success('修改成功')
                this.dialogVisible = false
                this.getList()
              }
            })
          } else {
            console.log(this.formModel)
            addAlarmEventTypeRule(this.formModel).then(res => {
              if (200 === res.code) {
                this.$message.success('添加成功')
                this.dialogVisible = false
                this.getList()
              }
            })
          }
        }
      })
    },
    // 重置表单
    resetForm () {
      this.formModel = {
        alarmEventTypeId: undefined,
        categoryName: undefined, // 类型名称
        eventAlarmDescribe: undefined, // 类型描述
        eventId: undefined, // 类型ID
        eventName: undefined, // 事件名称
        remark: undefined // 描述 
      }
    },
    getAlarmEventTypeOption () {
      listAlarmEventType().then(res => {
        this.alarmEventTypeOption = res.rows.map(item => {
          return {
            label: item.categoryName,
            value: item.alarmEventTypeId
          }
        })
      })
    }
  },

  components: {},
}
</script>